<template>
  <div id="consulbody">
    <div id="consul">
      <el-row :gutter="20">
        <el-col :span="4">
          <el-input v-model="input" placeholder="请输入内容"></el-input>
        </el-col>
        <el-col :span="2">
          <el-button @click="serch" type="primary">搜索</el-button>
        </el-col>
      </el-row>
    </div>
    <el-table :data="litableData" style="width: 100%">
      <el-table-column prop="id" label="咨询编号" width="180">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">{{
            scope.row.id
          }}</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="messageTitle" label="咨询标题" width="180">
      </el-table-column>
      <el-table-column prop="number" label="阅读量"> </el-table-column>
      <el-table-column prop="releaseTime" label="发布时间" width="180">
      </el-table-column>
      <el-table-column prop="operation" label="操作" width="300">
        <template slot-scope="scope">
          <el-button
            size="mini"
            class="btn"
            @click="dialogFormVisible1(scope.row)"
            type="text"
            >查看详情
          </el-button>

          <el-button
            size="mini"
            class="btn"
            @click="dialogFormVisible = true"
            type="text"
            >置顶</el-button
          >

          <el-button
            size="mini"
            class="btn"
            @click="handleDelete(scope.row)"
            type="text"
            style="color: #fb9678"
            >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align: right;margin-top: 20px;">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        @current-change="changePage"
        :page-size="limit"
      >
      </el-pagination>
    </div>
    <!-- 查看详情模态框 -->
    <el-dialog
      title="收货地址"
      :visible.sync="WatchDdialogFormVisible"
      width="25%"
    >
      <el-form :model="watchForm">
        <el-form-item label="资讯编号:" :label-width="formLabelWidth">
          <div>{{ watchForm.id }}</div>
        </el-form-item>
        <el-form-item label="咨询标题" :label-width="formLabelWidth">
          <div>{{ watchForm.messageTitle }}</div>
        </el-form-item>
        <el-form-item label="阅读量:" :label-width="formLabelWidth">
          <div>{{ watchForm.number }}</div>
        </el-form-item>
        <el-form-item label="发布时间:" :label-width="formLabelWidth">
          <div>{{ watchForm.releaseTime }}</div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="WatchDdialogFormVisible = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "consulbody",
  data() {
    return {
      page: 1,
      total: 0,
      limit: 5,
      litableData: [
        {
          id: "1",
          time: "2022.7.15",
          operation: "蛇蛇儿",
          number: "123",
          address: "中宏深圳像素一室一厅4100元50平",
        },
        {
          id: "2",
          time: "2022.7.15",
          operation: "志明儿",
          number: "123",
          address: "中宏深圳像素一室一厅4100元50平",
        },
        {
          id: "3",
          time: "2022.7.15",
          operation: "西飞儿",
          number: "123",
          address: "上中宏深圳像素一室一厅4100元50平",
        },
        {
          id: "4",
          time: "2022.7.15",
          operation: "罗卜儿",
          number: "123",
          address: "中宏深圳像素一室一厅4100元50平",
        },
      ],
      input: "",
      listFrom: {
        page: this.page,
        limit: this.limit,
      },
      dialogTableVisible: false,
      WatchDdialogFormVisible: false,
      watchForm: {},
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "120px",
    };
  },
  methods: {
    handleClick(index) {
      console.log(index);
    },
    /*  handleEdit(index, row) {
             console.log(index, row);
         }, */
    // handleDelete(row) {
    //     this.litableData = this.litableData.filter((item) => {
    //         return item.id != row.id
    //     })
    // },
    Consulbody() {
      this.$axios({
        method: "GET",
        url: "/messageList/list",
        // params: this.listFrom,
        params: {
          page: this.page,
          limit: this.limit,
        },
        headers: {
          token:
            "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJwaG9uZSI6IjEzMjU4MjkwMDAwIiwibmFtZSI6IueuoeeQhuWRmCIsImlkZW50aXR5Q2FyZCI6IjUxMDkwMjE5OTkwNDMwODg4OCIsImV4cCI6MTY1ODc2MzEyOSwidXNlcm5hbWUiOiJhZG1pbjExIiwicGVybWlzc2lvblRhZ3MiOiJiaWxsTWFuYWdlcjpsaXN0YmlsbE1hbmFnZXI6ZmluZEFsbGJpbGxNYW5hZ2VyOmZpbmRiaWxsTWFuYWdlcjppbnNlcnRiaWxsTWFuYWdlcjp1cGRhdGViaWxsTWFuYWdlcjpkZWxldGVob3VzZUluZm86bGlzdGhvdXNlSW5mbzp1cGRhdGVob3VzZUluZm86aW5zZXJ0aG91c2VJbmZvOmRlbGV0ZWhvdXNlSW5mbzpmaW5kRGV0YWlsY29udHJhY3RNYW5hZ2VyOmxpc3Rjb250cmFjdE1hbmFnZXI6ZmluZEFsbGNvbnRyYWN0TWFuYWdlcjpmaW5kY29udHJhY3RNYW5hZ2VyOmluc2VydGNvbnRyYWN0TWFuYWdlcjp1cGRhdGVjb250cmFjdE1hbmFnZXI6ZGVsZXRld2l0aGRyYXdSZXZpZXc6bGlzdHdpdGhkcmF3UmV2aWV3OmZpbmRBbGx3aXRoZHJhd1JldmlldzpmaW5kd2l0aGRyYXdSZXZpZXc6aW5zZXJ0d2l0aGRyYXdSZXZpZXc6dXBkYXRlcXVlc3Rpb246bGlzdHdpdGhkcmF3UmV2aWV3OmRlbGV0ZXF1ZXN0aW9uOmZpbmRBbGxxdWVzdGlvbjpkZWxldGVtZXNzYWdlTGlzdDpsaXN0bWVzc2FnZUxpc3Q6ZmluZEFsbG1lc3NhZ2VMaXN0Omluc2VydG1lc3NhZ2VMaXN0OmRlbGV0ZXVzZXI6ZmluZHVzZXI6bGlzdHVzZXI6ZmluZERldGFpbHNCeUlkbGFuZGxvcmQ6bGlzdGxhbmRsb3JkOmZpbmRIb3VzZUluZm9CeUxhbmRsb3JkSWRsYW5kbG9yZDpmaW5kaG91c2VSZW50UmVxdWVzdDpsaXN0aG91c2VSZW50UmVxdWVzdDpmaW5kRGV0YWlsQnlJZGhvdXNlUmVudFJlcXVlc3Q6ZGVsZXRlZmFjaWxpdHk6bGlzdGZhY2lsaXR5OmZpbmRBbGxmYWNpbGl0eTppbnNlcnRmYWNpbGl0eTpkZWxldGVjb25maWd1cmF0aW9uOmZpbmRBbGxQYXltZW50Y29uZmlndXJhdGlvbjpmaW5kQWxsTGVhc2Vjb25maWd1cmF0aW9uOmZpbmRBbGxUb3dhcmRjb25maWd1cmF0aW9uOmZpbmRBbGxEZWNvcmF0ZWNvbnRyYWN0VGVtcGxhdGU6bGlzdGNvbnRyYWN0VGVtcGxhdGU6ZmluZEFsbGNvbnRyYWN0VGVtcGxhdGU6aW5zZXJ0Y29udHJhY3RUZW1wbGF0ZTpkZWxldGVjb250cmFjdFRlbXBsYXRlOmRlbGV0ZWNvbnRyYWN0VGVtcGxhdGU6ZmluZEJ5SWRob3VzZVJlcXVlc3Q6bGlzdGhvdXNlUmVxdWVzdDpkZWxldGUifQ.PMJVSA5nqglpMO0RvkWiE54JzzQP6fDaEdseYHVQyRU",
        },
      }).then((res) => {
        console.log(res);
        this.total = res.count;
        this.litableData = res.data;
        this.litableData.forEach((item) => {
          item.releaseTime = new Date(item.releaseTime).toLocaleDateString();
        });
      });
    },
    /* 删除 */
    handleDelete(row) {
      this.$axios({
        method: "get",
        url: "/messageList/delete",
        params: { id: row.id },
        headers: {
          token:
            "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJwaG9uZSI6IjEzMjU4MjkwMDAwIiwibmFtZSI6IueuoeeQhuWRmCIsImlkZW50aXR5Q2FyZCI6IjUxMDkwMjE5OTkwNDMwODg4OCIsImV4cCI6MTY1ODc2MzEyOSwidXNlcm5hbWUiOiJhZG1pbjExIiwicGVybWlzc2lvblRhZ3MiOiJiaWxsTWFuYWdlcjpsaXN0YmlsbE1hbmFnZXI6ZmluZEFsbGJpbGxNYW5hZ2VyOmZpbmRiaWxsTWFuYWdlcjppbnNlcnRiaWxsTWFuYWdlcjp1cGRhdGViaWxsTWFuYWdlcjpkZWxldGVob3VzZUluZm86bGlzdGhvdXNlSW5mbzp1cGRhdGVob3VzZUluZm86aW5zZXJ0aG91c2VJbmZvOmRlbGV0ZWhvdXNlSW5mbzpmaW5kRGV0YWlsY29udHJhY3RNYW5hZ2VyOmxpc3Rjb250cmFjdE1hbmFnZXI6ZmluZEFsbGNvbnRyYWN0TWFuYWdlcjpmaW5kY29udHJhY3RNYW5hZ2VyOmluc2VydGNvbnRyYWN0TWFuYWdlcjp1cGRhdGVjb250cmFjdE1hbmFnZXI6ZGVsZXRld2l0aGRyYXdSZXZpZXc6bGlzdHdpdGhkcmF3UmV2aWV3OmZpbmRBbGx3aXRoZHJhd1JldmlldzpmaW5kd2l0aGRyYXdSZXZpZXc6aW5zZXJ0d2l0aGRyYXdSZXZpZXc6dXBkYXRlcXVlc3Rpb246bGlzdHdpdGhkcmF3UmV2aWV3OmRlbGV0ZXF1ZXN0aW9uOmZpbmRBbGxxdWVzdGlvbjpkZWxldGVtZXNzYWdlTGlzdDpsaXN0bWVzc2FnZUxpc3Q6ZmluZEFsbG1lc3NhZ2VMaXN0Omluc2VydG1lc3NhZ2VMaXN0OmRlbGV0ZXVzZXI6ZmluZHVzZXI6bGlzdHVzZXI6ZmluZERldGFpbHNCeUlkbGFuZGxvcmQ6bGlzdGxhbmRsb3JkOmZpbmRIb3VzZUluZm9CeUxhbmRsb3JkSWRsYW5kbG9yZDpmaW5kaG91c2VSZW50UmVxdWVzdDpsaXN0aG91c2VSZW50UmVxdWVzdDpmaW5kRGV0YWlsQnlJZGhvdXNlUmVudFJlcXVlc3Q6ZGVsZXRlZmFjaWxpdHk6bGlzdGZhY2lsaXR5OmZpbmRBbGxmYWNpbGl0eTppbnNlcnRmYWNpbGl0eTpkZWxldGVjb25maWd1cmF0aW9uOmZpbmRBbGxQYXltZW50Y29uZmlndXJhdGlvbjpmaW5kQWxsTGVhc2Vjb25maWd1cmF0aW9uOmZpbmRBbGxUb3dhcmRjb25maWd1cmF0aW9uOmZpbmRBbGxEZWNvcmF0ZWNvbnRyYWN0VGVtcGxhdGU6bGlzdGNvbnRyYWN0VGVtcGxhdGU6ZmluZEFsbGNvbnRyYWN0VGVtcGxhdGU6aW5zZXJ0Y29udHJhY3RUZW1wbGF0ZTpkZWxldGVjb250cmFjdFRlbXBsYXRlOmRlbGV0ZWNvbnRyYWN0VGVtcGxhdGU6ZmluZEJ5SWRob3VzZVJlcXVlc3Q6bGlzdGhvdXNlUmVxdWVzdDpkZWxldGUifQ.PMJVSA5nqglpMO0RvkWiE54JzzQP6fDaEdseYHVQyRU",
        },
      }).then((res) => {
        console.log(res);
        if (res.code === 0) {
          this.$message.success("删除成功");
          this.Consulbody();
        }
      });
    },
    /* 查看详情 */
    dialogFormVisible1(row) {
      (this.WatchDdialogFormVisible = true),
        // console.log(row.id)
        this.$axios({
          method: "GET",
          url: "/messageList/list",
          data: { id: row.id },
        }).then((res) => {
          this.watchForm = res.data[0];
          this.watchForm.releaseTime = new Date(
            this.watchForm.releaseTime
          ).toLocaleDateString();
          console.log(res);
        });
    },
    /* 分页 */
    changePage(pagenow) {
      // console.log(pagenow)
      this.page = pagenow;
      this.Consulbody();
    },
    serch() {
      console.log(this.input);
    },
  },
  created() {
    this.Consulbody();
  },
};
</script>

<style lang="less" scoped>
#consulbody {
  margin-top: 20px;
}

.btn {
  border: none;
}
</style>